<script>
/**
 * @desc '钱包'的'收入 支出'
 */

import { mapState, mapGetters } from 'vuex'

export default {
  name: 'income-and-expenditure',
  computed: {
    ...mapState('Wallet', ['isVisible']),
    ...mapGetters('Wallet', ['currMonthList']),
    incomeText() {
      const money = this.currMonthList.reduce((pre, curr) => {
        return pre + (!curr.type ? curr.money : 0)
      }, 0)
      return this.isVisible ? money : '****'
    },
    expenditureText() {
      const money = this.currMonthList.reduce((pre, curr) => {
        return pre + (curr.type ? curr.money : 0)
      }, 0)
      return this.isVisible ? money : '****'
    }
  }
}
</script>

<template>
  <div :class="$sty.container">
    <div :class="$sty.panel">
      <p :class="[$sty.title, $sty.green]">收入 +</p>
      <p :class="$sty.money">￥{{incomeText}}</p>
    </div>

    <div :class="$sty.line"></div>

    <div :class="$sty.panel">
      <p :class="[$sty.title, $sty.red]">支出 -</p>
      <p :class="$sty.money">￥{{expenditureText}}</p>
    </div>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
